<template>
  <div class="index">
    <div class="top">
      <el-button @click="onShowImg">预览</el-button>
      <!-- 查看大图 -->
      <ksh-show-img :disp="showViewer"></ksh-show-img>
    </div>
    <div class="map">
      <!-- 地图装载区 -->
      <div class="map_view" id="map"></div>
      <!-- 左下角等级列表 -->
      <ul id="bottom_level_ul">
        <li v-for="(item,i) in levelData" v-bind:key="i" class="level_li">
          <i class="fa fa-circle" style="color: #2c59a7" aria-hidden="true"/>
          {{item}}
        </li>
      </ul>
      <!-- 右上角按钮 -->
      <i class="fa fa-arrows-alt" @click="full"/>
      <div class="info">
        <div class="info_r">
          <span class="info_c float_l">项目名称</span>
          <span class="info_c float_r">F17新建开关工程</span>
        </div>

        <div class="line"></div>

        <div class="info_r">
          <span class="info_c float_l">人员信息</span>
          <span class="info_c float_r">天宇智能有限公司</span>
        </div>

        <div class="info_r">
          <span class="info_c float_l"> </span>
          <span class="info_c float_r">陈智浩</span>
        </div>

        <div class="line"></div>

        <div class="info_r">
          <span class="info_c float_l">时间地点</span>
          <span class="info_c float_r">螺仔湖一路二号</span>
        </div>

        <div class="info_r">
          <span class="info_c float_l"> </span>
          <span class="info_c float_r">2020-11-06 11:30-21:30</span>
        </div>

        <div class="line"></div>

        <div class="info_r">
          <span class="info_c float_l">工作内容</span>
          <el-link type="su" class="float_r">查看详情</el-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { capitals, huiZhou } from '@/demos/mapData'
  //just some colors
  var colors = [
    '#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00',
    '#b82e2e', '#316395', '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300', '#8b0707',
    '#651067', '#329262', '#5574a6', '#3b3eac'
  ]
  var maps

  function initPage (DistrictExplorer) {
    let _this = this
    //创建一个实例
    var districtExplorer = new DistrictExplorer({
      map: maps
    })

    var countryCode = 100000, //全国
      provCodes = [
        110000, //北京
        510000 //四川
      ],
      cityCodes = [
        230100, //哈尔滨
        331100 //丽水
      ]

    districtExplorer.loadMultiAreaNodes(
      //只需加载全国和市，全国的节点包含省级
      [countryCode].concat(cityCodes),
      function (error, areaNodes) {

        var countryNode = areaNodes[0],
          cityNodes = areaNodes.slice(1)

        var path = []

        //首先放置背景区域，这里是大陆的边界
        path.push(getLongestRing(countryNode.getParentFeature()))

        for (var i = 0, len = provCodes.length; i < len; i++) {
          //逐个放置需要镂空的省级区域
          path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])))
        }

        for (var i = 0, len = cityNodes.length; i < len; i++) {
          //逐个放置需要镂空的市级区域
          path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()))
        }

        //绘制带环多边形
        //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
        var polygon = new AMap.Polygon({
          bubble: true,
          lineJoin: 'round',
          strokeColor: 'red', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: 'black', //填充色
          fillOpacity: 0.65, //填充透明度
          map: maps,
          path: path
        })
      })
  }

  function getLongestRing (feature) {
    var rings = getAllRings(feature)

    rings.sort(function (a, b) {
      return b.length - a.length
    })

    return rings[0]
  }

  function getAllRings (feature) {

    var coords = feature.geometry.coordinates,
      rings = []

    for (var i = 0, len = coords.length; i < len; i++) {
      rings.push(coords[i][0])
    }

    return rings
  }

  export default {
    data () {
      return {
        dialogVisible: false,
        levelData: ['一级风险', '二级风险', '三级风险', '四级风险', '五级风险'],
        showViewer: false, // 显示查看器
        url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      }
    },
    methods: {
      onShowImg () {
        console.log(this.showViewer)
        if (this.showViewer) {
          this.showViewer = false
        } else {
          this.showViewer = true
        }
      },

      // 地图设置
      aMapVue () {

        var map = new AMap.Map('map', {
          zoom: 9,//级别
          resizeEnable: true,
          viewMode: '3D', //开启3D视图,默认为关闭
          center: [114.416196, 23.111847],//中心点坐标
        })

        for (var i = 0; i < huiZhou.length; i += 1) {
          console.log(huiZhou[i].center)
          let center = huiZhou[i].center
          let circleMarker = new AMap.CircleMarker({
            center: center,
            radius: 10,//3D视图下，CircleMarker半径不要超过64px
            strokeColor: this.level(i),
            strokeWeight: 5,
            strokeOpacity: 0.6,
            fillColor: this.level(i),
            fillOpacity: 1,
            zIndex: 10,
            bubble: true,
            cursor: 'pointer',
            clickable: true
          })
          circleMarker.setMap(map)

          // 创建点覆盖物
          var marker = new AMap.Marker({
            position: new AMap.LngLat(huiZhou[i].center[0], huiZhou[i].center[1]),
            // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            offset: new AMap.Pixel(-13, -30)
          })
          map.add(marker)
        }
        let _this = this
        AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
          maps = _this.map
          initPage(DistrictExplorer)
        })

      },

      // 生成风险登记列表
      generLevelLi () {
        const li = document.getElementsByClassName('level_li')
        for (let i = 0; i < li.length; i++) {
          let px = i === li.length - 1 ? '0px' : '20px'
          li[i].setAttribute('style', 'float:left;' + 'padding-right: ' + px)
          li[i].firstElementChild.setAttribute('style', 'color:' + this.level(i))
        }
      },

      // 级别颜色
      level (s) {
        const levelColor = ['#FC412B', '#FF872B', '#EDCA1D', '#3088FC', '#1AC2F3']
        return levelColor[s]
      },

      full () {
        let dt = document
        let de = document.documentElement

        // 兼容浏览器
        let rfs = de.requestFullScreen || de.webkitRequestFullScreen || de.mozRequestFullScreen || de.msRequestFullscreen
        let rfe = dt.exitFullscreen || dt.msExitFullscreen || dt.mozCancelFullScreen || dt.webkitCancelFullScreen

        // 是否全屏
        var isFull = !!(dt.webkitIsFullScreen || dt.mozFullScreen || dt.msFullscreenElement || dt.fullscreenElement)//!document.webkitIsFullScreen都为true。因此用!!

        if (isFull == false) {
          // 开启全屏
          rfs.call(document.documentElement)
          let rp = document.getElementsByClassName('router-p')
          rp.item(0).setAttribute('style', 'max-width:' + document.documentElement.clientWidth + 'px;max-height:' + document.documentElement.clientHeight + 'px;' + 'position: absolute;z-index:9999')
        } else {
          // 关闭全屏
          rfe.call(document)
          let rp = document.getElementsByClassName('router-p')
          rp.item(0).setAttribute('style', 'max-width: 700px')
        }
      },

    },
    mounted () {
      this.aMapVue()
      this.generLevelLi()
    },

  }
</script>

<style scoped>
  .map, #map, .index {
    height: 600px;
  }

  .map {
    position: relative;
  }

  #bottom_level_ul {
    list-style: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.75);
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #DFDFDF;
  }

  .info{
    position: absolute;
    width: 200px;
    height: 220px;
    bottom: 200px;
    right: 10px;
    background: #ffffff;
    padding: 0px 10px;
    border-radius: 6px;
    border: 2px solid #DFDFDF;
    list-style: none;
    font-size: 14px;
  }

  .info_r{
    height: 25px;
    line-height: 25px;
    padding: 5px 0px;
  }

  .info_r > .float_l{
    color: rgba(153, 153, 153, 100)
  }

  .info_r > .float_r{
    color: rgba(97, 98, 102, 100)
  }

  .line{
    height: 1px;
    background: rgba(245, 245, 245, 100)
  }

  .fa-arrows-alt {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #b8b7b7;
  }

</style>
